<div class="component template-component">
    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>
    <div class="add-div add-template-div">
    </div>
    <div class="data-div">
        <div class="query-div">
            <div class="query-form">
                <input type="text" class="query-input form-control" placeholder="input code or name" />
            </div>
            <div class="operation-div">
                <div class="query-button"></div>
            </div>
        </div>
        <div class="data-list template-list">
        </div>
    </div>

    <div class="templates">
        <div class="item-panel template-item-panel">
            <div class="self">
                <div class="id-div element-div">
                </div>
                <div class="lang-div element-div">
                </div>
                <div class="content-div element-div">
                </div>
                <div class="operation-button-wrap">
                    <div class="modify-button" title="Edit template Item"></div>
                    <div class="delete-button" title="Delete template Item"></div>
                </div>
            </div>
        </div>

        <div class="edit-data-panel edit-template-panel panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body">
                <div class="code-element edit-panel-element">
                    <div class="code-label edit-element-label required">code:</div>
                    <div class="input-div">
                        <input name="code" class="code-value edit-element-value form-control" maxlength="30" />
                    </div>
                </div>
                <div class="type-element edit-panel-element form-group">
                    <div class="type-label edit-element-label">type:</div>
                    <div class="type-value-wrap">
                        <div class="radio-item">
                            <input type="radio" class="radio type-value" name="type-value" value="1" checked /><span>TEXT</span>
                        </div>
                        <div class="radio-item">
                            <input type="radio" class="radio type-value" name="type-value" value="2" /><span>FILE</span>
                        </div>
                    </div>
                </div>
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label required">name:</div>
                    <div class="input-div">
                        <input name="name" class="name-value edit-element-value form-control" maxlength="80" />
                    </div>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <div class="input-div">
                        <textarea name="description"
                            class="description-value edit-textarea-element-value form-control"></textarea>
                    </div>
                </div>
                <div class="content-element edit-panel-element">
                    <div class="content-label edit-element-label required">content:</div>
                    <div class="input-div">
                        <textarea name="content"
                            class="content-value edit-textarea-element-value form-control"></textarea>
                    </div>
                </div>
                <div class="template-file upload-wrap edit-panel-element">
                    <div class="upload-button upload-template"></div>
                    <input class="upload-input" type="file" style="display: none;">
                    <div class="file-display">
                        <div class="file-name download"></div>
                        <div class="delete-file-button"></div>
                    </div>
                    <div class="invalid-message"></div>
                </div>
                <button type="button" class="save-button save-group-button btn btn-primary">
                    Save
                </button>
                <button type="button" class="cancel-button cancel-group-button btn btn-success">
                    Cancel
                </button>
            </div>
        </div>

        <div class="data-panel template-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element field-element">
                    <div class="field-label id-label body-element-label">id:</div>
                    <div class="field-value id-value body-element-value"></div>
                </div>
                <div class="type-element field-element">
                    <div class="field-label type-label body-element-label">type:</div>
                    <div class="field-value type-value body-element-value"></div>
                </div>
                <div class="code-element field-element">
                    <div class="field-label code-label body-element-label">code:</div>
                    <div class="field-value code-value body-element-value"></div>
                </div>
                <div class="name-element field-element">
                    <div class="field-label name-label body-element-label">name:</div>
                    <div class="field-value name-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="field-label description-label body-element-label">description:</div>
                    <div class="field-value description-value body-element-value"></div>
                </div>
                <div class="content-element">
                    <div class="field-label content-label body-element-label">content:</div>
                    <div class="field-value content-value body-element-value"></div>
                </div>
                <div class="template-file">
                    <div class="field-label template-file-label body-element-label">template file:</div>
                    <div class="field-value download template-file-value file-name body-element-value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="windows">
    </div>
</div>

<link type="text/css" rel="stylesheet"
    href="/static/clientlibs/tattoo/datacenter/component/template-component/css/template-component.css" />
<script type="text/javascript"
    src="/static/clientlibs/tattoo/datacenter/component/template-component/js/template-component.js"></script>